<template>
    <div class="app-container">
        <!-- 项目基础信息 -->
        <h5 class="titleInfo">
            项目基础信息
        </h5>
        <el-form class="form" ref="form" :model="form" :rules="rules" label-width="130px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="项目名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目关键字">
                        <el-input v-model="form.keyword"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目分类" prop="cates">
                        <el-cascader
                            placeholder="请选择" 
                            v-model="form.cates"
                            :options="cateOption"
                            change-on-select
                        ></el-cascader>
                    </el-form-item>
                </el-col> 
                <!-- <el-col :span="12">
                    <el-form-item label="促销条">
                        <el-select placeholder="请选择" v-model="form.promotionsId">
                            <el-option
                            v-for="item in proOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col> -->
                <el-col :span="12">
                    <el-form-item label="医院名称" prop="hospitalId">
                        <el-select placeholder="请选择" v-model="form.hospitalId">
                            <el-option
                            v-for="item in hosOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="擅长医生">
                        <el-select
                            v-model="form.doctors" @click.native="getDoctorList()"
                            multiple
                            placeholder="请选择">
                                <el-option
                                v-for="item in docOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="简介">
                        <el-input v-model="form.descript"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        <!-- 项目特色 -->
        <div class="divBar"></div>
        <h5 class="titleInfo">
            项目特色
        </h5>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="是否维护">
                        <el-select placeholder="请选择" v-model="form.isRepair">
                            <el-option
                            v-for="item in repOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="保险服务">
                        <el-select placeholder="请选择" v-model="form.insuranceIsSet">
                            <el-option
                            v-for="item in insOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目保障">
                        <el-select
                            v-model="form.ensureContent"
                            multiple
                            filterable
                            allow-create
                            default-first-option
                            placeholder="请选择">
                                <el-option
                                v-for="item in ensOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        <!-- 项目价格信息 -->
        <div class="divBar"></div>
        <h5 class="titleInfo">
            项目价格信息
        </h5>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="购买方式" prop="projectType">
                        <el-select placeholder="请选择" 
                        @change="priceFn"
                        v-model="form.projectType">
                            <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <div  v-if="priceSH">
                    <el-col :span="12">
                        <el-form-item label="预约价格" prop="appointmentPrice">
                            <el-input v-model="form.appointmentPrice"></el-input>
                        </el-form-item>
                    </el-col>
                </div>
                <div v-else>
                    <el-col :span="12">
                        <el-form-item label="项目全款价" prop="projectPrice">
                            <el-input v-model="form.projectPrice"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="抵扣积分" prop="deductionCredit">
                            <el-input v-model="form.deductionCredit"></el-input>
                        </el-form-item>
                    </el-col>
                </div>
                <el-col :span="12">
                    <el-form-item label="原价" prop="originPrice">
                        <el-input v-model="form.originPrice"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="优惠价" prop="discounts">
                        <el-input v-model="form.discounts"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目预约量">
                        <el-input v-model="form.appointmentPeoples"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="排序" prop="sort">
                        <el-input v-model="form.sort"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        <!-- 项目显示状态 -->
        <div class="divBar"></div>
        <h5 class="titleInfo">
            项目显示状态
        </h5>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="是否上架">
                        <el-select placeholder="请选择" v-model="form.status">
                            <el-option
                            v-for="item in staOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="推荐首页">
                        <el-select placeholder="请选择" v-model="form.isDashboard">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        <!-- 项目材料管理 -->
        <div class="divBar"></div>
        <h5 class="titleInfo">
            项目材料管理
        </h5>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="项目图片">
                        <uploadImg ref="uploadImg" :fileNum="fileNum" :fileList="fileList"></uploadImg>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="项目描述">
                        <Tinymce style="width:96%" v-model="form.content"></Tinymce>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button style="margin:30px 0" type="primary" @click="submitFn('form')" >立即提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import uploadImg from '@/components/UploadImg/index'
import Tinymce from '@/components/Tinymce'
import {hospitalDropDown} from '@/api/doctorManage'
import {doctorList,insertProject,updateProject,findProjectByProjectId} from '@/api/itemList'
import {findProjectGuaranteeList} from '@/api/itemSecurity'
import {findAllBeautyCategoryList} from '@/api/medicalClassifyList'

export default {
    name:"itemEdit",
    data(){
        return {
            fileList:[],
            fileNum:4,
            content:"",
            value1:"",
            options:[{
                    value: '0',
                    label: '否'
                }, {
                    value: '1',
                    label: '是'
                }
            ],
            priceSH:true,
            proOptions:[],
            cates:[],
            form:{
                projectId:null,
                name:null,
                keyword:null,
                // promotionsId:null,
                hospitalId:null,
                cates:null,
                doctors:null,
                descript:"",
                isRepair:null,
                insuranceIsSet:null,
                ensureContent:null,
                projectType:"0",
                appointmentPrice:"0",
                projectPrice:"0",
                deductionCredit:"0",
                originPrice:null,
                discounts:null,
                appointmentPeoples:null,
                sort:null,
                status:null,
                isDashboard:null,
                projectImages:[],
                pBcId:null,
                content:""
            },
            rules:{
                name:[
                    { required: true, message: '请输入项目名称', trigger: 'blur' },
                ],
                cates:[
                    { required: true, message: '请选择项目分类', trigger: 'blur' },
                ],
                hospitalId:[
                    { required: true, message: '请选择医院名称', trigger: 'blur' },
                ],
                projectType:[
                    { required: true, message: '请选择购买方式', trigger: 'blur' },
                ],
                appointmentPrice:[
                    { required: true, message: '请输入预约价格', trigger: 'blur' },
                ],
                projectPrice:[
                    { required: true, message: '请输入项目全款价', trigger: 'blur' },
                ],
                deductionCredit:[
                    { required: true, message: '请输入抵扣积分', trigger: 'blur' },
                ],
                originPrice:[
                    { required: true, message: '请输入原价', trigger: 'blur' },
                ],
                discounts:[
                    { required: true, message: '请输入优惠价', trigger: 'blur' },
                ],
                sort:[
                    { required: true, message: '请输入排序', trigger: 'blur' },
                ],
            },
            hosOptions:[],
            docOptions:[],
            repOptions:[{
                    value: '0',
                    label: '否'
                }, {
                    value: '1',
                    label: '是'
                }
            ],
            insOptions:[{
                    value: '0',
                    label: '禁止'
                }, {
                    value: '1',
                    label: '允许'
                }
            ],
            typeOptions:[{
                    value: '0',
                    label: '预约项目'
                }, {
                    value: '1',
                    label: '全额购买项目'
                }
            ],
            staOptions:[{
                    value: '0',
                    label: '上线'
                }, {
                    value: '1',
                    label: '下线'
                },{
                    value: '2',
                    label: '回收站'
                }
            ],
            ensOptions:[],
            cateOption:[{
                    value: 0,
                    label: '医美'
                }, {
                    value: 1,
                    label: '口腔管理'
                }, {
                    value: 2,
                    label: '健康管理'
            }],
            userId:""
        }
    },
    components:{uploadImg,Tinymce},
    created(){
        this.getDrop()
        if(this.cateFn('0')!=[]){
            this.cateOption[0]["children"] = this.cateFn('0')
        }
        if(this.cateFn('1')!=[]){
            this.cateOption[1]["children"] = this.cateFn('1')
        }
        if(this.cateFn('2')!=[]){
            this.cateOption[2]["children"] = this.cateFn('2')
        }
    },
    mounted(){
        this.userId = this.$route.query.userId+""
        this.getInfo()
        this.getDoctorList()  
        this.form.projectId = Number(this.userId)
        // console.log(this.form)
    },
    methods:{
        priceFn(){
            if(this.form.projectType=="0"){
                this.priceSH = true
            }else{
                this.priceSH = false
            }
        },
        getInfo(){
            let datas = {
                id:this.userId
            }
            findProjectByProjectId(datas).then(res=>{
                this.form = res.data.data
                console.log(this.form)
                this.form.insuranceIsSet = this.form.insuranceIsSet+""
                this.form.isRepair = this.form.isRepair+""
                this.form.projectType = this.form.projectType+""
                this.form.status = this.form.status+""
                this.form.isDashboard = this.form.isDashboard+""
                if(this.form.ensureContent){
                    this.form.ensureContent = this.form.ensureContent.split(",").map(Number)
                }else{
                    this.form.ensureContent = []
                }
                if(this.form.doctors){
                    this.form.doctors = this.form.doctors.map(Number)
                }else{
                    this.form.doctors = []
                }
                if(this.form.pBcId){
                    this.form.cates = this.form.pBcId.split("/").map(Number)
                }else{
                    this.form.cates = []
                }
                if(res.data.data.projectImages){
                    res.data.data.projectImages.forEach((e,index)=>{
                        this.fileList.push({
                            url : sessionStorage.getItem("imgUrlPrefix")+res.data.data.projectImages[index]
                        })
                    })
                }
                console.log(this.form)
            })
        },
        //获取分类
        cateFn(e){
            let datas = {
                plate:e
            }
            let newArr=[]
            findAllBeautyCategoryList(datas).then(res=>{
                // console.log(res)
                let resData = res.data.data.list
                if(resData!=[]){
                    resData.forEach((item1,index) => {
                        newArr.push({
                            value: item1.id,
                            label: item1.name,
                        })
                        if(item1.children!=null){
                            newArr[index]["children"] = []
                            item1.children.forEach((item2,i) => {
                                newArr[index]["children"].push({
                                    value: item2.id,
                                    label: item2.name,
                                })
                                if(item2.children!=null){
                                    newArr[index]["children"][i]["children"] = []
                                    item2.children.forEach((item3) => {
                                        newArr[index]["children"][i]["children"].push({
                                            value: item3.id,
                                            label: item3.name,
                                        })
                                    })
                                }
                            })
                        } 
                    })
                }
            })
            return newArr
        },
        getDoctorList(){
            let datas={
                hospitalId:this.form.hospitalId+"",
                pageNum:"1",
                pageSize:"10000"
            }
            doctorList(datas).then(res=>{
                // console.log(res)
                let resData = res.data.data.list
                let newData = [];
                resData.forEach(e => {
                    newData.push({
                        value:e.id,
                        label:e.name
                    })
                });
                this.docOptions = newData
                // console.log(newData)
            })
        },
        //获取相关下拉列表
        getDrop(){
            // 医院列表
            hospitalDropDown().then(res=>{
                let resData = res.data.data
                let newData = [];
                resData.forEach(e => {
                    newData.push({
                        value:e.id,
                        label:e.name
                    })
                });
                this.hosOptions = newData
            })
            .catch(error =>{
                this.$message.error(error);
            })
            // 项目保障
            let datas1 = {
                "pageNum": "0",
                "pageSize": "10000",
            }
            findProjectGuaranteeList(datas1).then(res=>{
                let resData = res.data.data.list
                let newData = [];
                resData.forEach(e => {
                    newData.push({
                        value:e.id,
                        label:e.name
                    })
                });
                this.ensOptions = newData
                // console.log(newData)
            })
        },
        // 修改提交
        submitFn(e){
            this.$refs[e].validate((valid) => {
                if (valid) {
                    // console.log(JSON.stringify(this.form))
                    
                        this.form.projectImages=this.$refs.uploadImg.submitUpload()
                    
                    if(this.form.ensureContent){
                        this.form.ensureContent = this.form.ensureContent.join(",")
                    }else{
                        this.form.ensureContent = null
                    }
                    if(this.form.doctors){
                        this.form.doctors = this.form.doctors.map(String)
                    }else{
                        this.form.doctors = null
                    }
                    // console.log(this.form)
                    this.form.pBcId = this.form.cates.join("/")
                    // this定义
                    let tf = this.form
                    let datas = this.form
                    updateProject(datas).then(res=>{
                        if(!res.data.code){
                            this.$message({
                                showClose: true,
                                message: '修改成功',
                                type: 'success'
                            });
                            this.$router.push('/itemIndex')
                        }else{
                            this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }
                    })
                    .catch(error =>{
                        this.$message.error(error);
                    })
                }else{
                     this.$message({
                        message: '有必填项没填，不能提交咯',
                        type: 'warning'
                    });
                    return false;
                }
            });
        }
    }
}
</script>
<style scoped>
.app-container{padding: 0px!important}
</style>
